<template>
  <AtList v-if="mode === 'list'" @on-add="handleAddNew" @on-edit="handleEdit" />
  <div v-else class="at-container">
    <div class="editor">
      <Editor v-model="content" type="editor" @change="onContentChange" />
    </div>
    <div class="tools-wrap">
      <el-form
        class="setting-item"
        ref="form"
        label-width="80px"
        label-position="left"
        :model="form"
        :rules="rules">
<!--        <el-form-item label="博客分类" prop="blogCategory">-->
<!--          <el-select v-model="form.blogCategory" placeholder="请选择分类" @change="getCategoryLabels" style="width: 100%;">-->
<!--            <el-option-->
<!--              v-for="item in categoryList"-->
<!--              :key="item.code"-->
<!--              :label="item.value"-->
<!--              :value="item.code">-->
<!--            </el-option>-->
<!--          </el-select>-->
<!--        </el-form-item>-->
        <el-form-item label="博客标签" prop="labels">
          <el-select multiple v-model="form.labels" placeholder="请选择标签" style="width: 100%;">
            <el-option
              v-for="item in labelList"
              :key="item.tagId"
              :label="item.tagName"
              :value="item.tagName">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="博客标题" prop="blogName">
          <el-input v-model="form.blogName" placeholder="请填写标题" />
        </el-form-item>
        <el-form-item label="博客描述" prop="blogDes">
          <el-input type="textarea" v-model="form.blogDes" placeholder="请填写描述" :autosize="{ minRows: 4 }" />
        </el-form-item>
        <el-form-item label="博客编码" prop="blogNo">
          <el-input v-model="form.blogNo" placeholder="请填写编码" />
        </el-form-item>
        <el-form-item label="首页显示" prop="blogIndex">
          <el-radio-group v-model="form.blogIndex">
            <el-radio :label="true">显示</el-radio>
            <el-radio :label="false">不显示</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="博客评级" prop="blogRate">
          <el-rate v-model="form.blogRate" style="display: inline-block;"></el-rate>
        </el-form-item>
      </el-form>
      <div class="button-wrap">
        <el-button type="primary" plain icon="el-icon-back" @click="handleBack">返回列表</el-button>
        <el-button type="primary" icon="el-icon-tickets" @click="handleSubmit">保存博客</el-button>
      </div>
    </div>
  </div>
</template>
<script>

import AtList from './bc-list.vue';
import Editor from '../components/editor.vue';
import { getCategory, getLabels, addBlog } from '../api/index';

export default {
  name: 'AtSetting',
  components: { Editor, AtList },
  data() {
    return {
      mode: 'list',
      content: '',
      html: '',
      categoryList: [],
      labelList: [],
      form: {
        blogId: null,
        blogCategory: 'BCZS',
        labels: [],
        blogName: '',
        blogDes: '',
        blogNo: '',
        blogRate: 1,
        blogIndex: false
      },
      rules: {
        blogCategory: [{ required: true, message: '请选择博客分类'}],
        labels: [{ required: true, message: '请选择博客标签'}],
        blogName: [{ required: true, message: '请填写博客标题'}],
        blogDes: [{ required: true, message: '请填写博客描述'}],
        blogNo: [{ required: true, message: '请填写博客编码'}]
      }
    };
  },
  methods: {
    onContentChange(html, code) {
      this.html = html;
      this.content = code;
    },
    // 获取分类列表
    getCategoryList() {
      getCategory().then(res => {
        if (res.data.success) {
          this.categoryList = (res.data.data || []);
        }
      });
    },
    // 查询某个分类的标签
    getCategoryLabels() {
      this.labelList = [];
      this.form.labels = [];
      getLabels(this.form.blogCategory).then(res => {
        if (res.data.success) {
          this.labelList = (res.data.data || []);
        }
      });
    },
    // 更新或新增blog
    handleSubmit() {
      this.$refs.form.validate(valid => {
        if (!valid) return;
        const params = {
          blogCategory: this.form.blogCategory,
          blogDes: this.form.blogDes,
          blogHtml: this.html,
          blogMd: this.content,
          blogNo: this.form.blogNo,
          blogIndex: this.form.blogIndex,
          blogName: this.form.blogName,
          blogRate: this.form.blogRate,
          tagNames: this.form.labels.join(',')
        };
        if (this.form.blogId) params.blogId = this.form.blogId;
        addBlog(params).then(res => {
          if (res.data.success) {
            this.$message.success('操作成功！');
            this.mode = 'list';
          }
        })
      });
    },
    handleBack() {
      this.mode = 'list';
    },
    handleAddNew() {
      this.mode = 'edit';
      this.form = {
        blogId: null,
        blogCategory: 'BCZS',
        labels: [],
        blogName: '',
        blogDes: '',
        blogNo: '',
        blogRate: 1,
        blogIndex: false
      };
      this.content = '';
      this.html = '';
    },
    handleEdit(blog) {
      this.mode = 'edit';
      this.form = { labels: blog.tagNames.split(','), ...blog };
      // this.form.labels = []; // blog.tagNames.split(',');
      this.content = blog.blogMd;
      this.html = blog.blogHtml;
      if (this.form.blogCategory) {
        getLabels(this.form.blogCategory).then(res => {
          if (res.data.success) {
            this.labelList = res.data.data || [];
          }
        });
      }
    }
  },
  mounted() {
    this.getCategoryLabels();
  },
  beforeDestroy() {
    
  },
}
</script>

<style lang="scss" scoped>
.at-container {
  display: flex;
  height: 100%;
}

.tools-wrap {
  background-color: #fff;
  width: 380px;
  margin-left: 24px;
  padding: 16px;
}

.editor {
  flex: 1;
  height: 100%;
  overflow: hidden;
}

.button-wrap {
  margin-top: 32px;
  text-align: left;
}
</style>
